<template>
  <section class="index">
    <HeadNav />
    <LeftMenu />
    <section class="rightContainer">
      <section class="container-title">
        <div v-for="(item, index) in contTit" :key="index">
          <span
            :class="
              index === 0 && index !== contTit.length - 1 ? 'blue-btn' : ''
            "
            @click="goItem(index)"
            >{{ item }}</span
          ><span v-if="index !== contTit.length - 1"
            >&nbsp;&nbsp;>&nbsp;&nbsp;</span
          >
        </div>
      </section>
      <router-view></router-view>
    </section>
  </section>
</template>

<script>
import HeadNav from "@/components/common/HeadNav";
import LeftMenu from "@/components/common/LeftMenu";

export default {
  name: "index",
  data() {
    return {
      contTit: [],
      currentRoute: "",
    };
  },
  components: {
    HeadNav,
    LeftMenu,
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.contTit = to.meta.title;
    });
  },
  //路由修改时调用
  beforeRouteUpdate(to, from, next) {
    this.contTit = to.meta.title;
    this.currentRoute = to;
    next();
  },
  methods: {
    goItem(index) {
      if (index === 0) this.$router.push(`${this.currentRoute.meta.type}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .rightContainer {
    position: relative;
    top: 0;
    left: 240px;
    width: calc(100% - 240px);
    height: calc(100% - 100px);
    overflow: auto;
    background: #e5e5e5;
    box-sizing: border-box;
    padding: 0 40px;
    .container-title {
      display: flex;
      font-size: 20px;
      margin: 30px 0 20px;
      .blue-btn {
        color: #597ef7;
        cursor: pointer;
      }
    }
  }
}
</style>
